@nav-bar-height: 44px;
@status-bar-height: var(--status-bar-height);
@tab-bar-height: 54px;
@player-mini-height: 60px;

@font-size-small-s: 10px;
@font-size-small: 12px;
@font-size-small-x: 13px;
@font-size-medium: 14px;
@font-size-medium-x: 16px;
@font-size-large: 18px;
@font-size-large-x: 22px;

@color-theme: #ff6565;
@color-base: var(--color-base);
@color-background: var(--color-background);
@color-background-d: var(--color-hl-background);

@color-hl-background: var(--color-hl-background);
@color-hl-background-2: var(--color-hl-background-2);
@color-hl-background-3: var(--color-hl-background-3);

@color-text: var(--color-text);
@color-text-d: var(--color-text-d);
@color-text-l: var(--color-text-l);
@color-text-ll: var(--color-text-ll);

@color-line: var(--color-line);

/* Color Background */
@color-red: #e54d42;
@color-orange: #f37b1d;
@color-yellow: #fbbd08;
@color-olive: #8dc63f;
@color-green: #39b54a;
@color-cyan: #1cbbb4;
@color-blue: #0081ff;
@color-purple: #6739b6;
@color-mauve: #9c26b0;
@color-pink: #e03997;
@color-brown: #a5673f;
@color-grey: #8799a3;

/* Color Light */
@color-redLight: #fadbd9;
@color-orangeLight: #fde6d2;
@color-yellowLight: #fef2ce;
@color-oliveLight: #e8f4d9;
@color-greenLight: #d7f0db;
@color-cyanLight: #d2f1f0;
@color-blueLight: #cce6ff;
@color-purpleLight: #e1d7f0;
@color-mauveLight: #ebd4ef;
@color-pinkLight: #f9d7ea;
@color-brownLight: #ede1d9;
@color-greyLight: #e7ebed;
